<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>学生添加</title>
    <link rel="stylesheet" type="text/css" href="/static/js/layui-v2.5.7/layui/css/layui.css">
    <script type="text/javascript" src="/static/js/layui-v2.5.7/layui/layui.js"></script>
    <script type="text/javascript" src="/static/js/myJs.js"></script>


</head>
<body>

<a href="SelectStudent" class="layui-btn layui-btn-radius layui-btn-primary">
    <i class="layui-icon">&#xe65a;</i>
</a>
<div class="layui-container">
    <div class="layui-row">

        <form action="InsertStudent" method="post" class="layui-form">
            <div class="layui-form-item">
                <label class="layui-form-label" for="name_id">学生名字</label>
                <div class="layui-input-inline">
                    <input type="text" name="name" id="name_id" class="layui-input"
                           placeholder="请输入学生名字" required>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label" for="password_id">学生密码</label>
                <div class="layui-input-inline">
                    <input type="text" name="password" id="password_id" class="layui-input"
                           placeholder="请输入学生密码" required>
                </div>
            </div>


            <div class="layui-form-item">
                <label class="layui-form-label" for="age_id">学生年龄</label>
                <div class="layui-input-inline">
                    <input type="number" name="age" id="age_id" class="layui-input"
                           placeholder="请输入学生年龄" required>
                </div>
            </div>


            <div class="layui-form-item">
                <label class="layui-form-label">学生班级</label>
                <div class="layui-input-inline">
                    <select name="cls_id" id="cls_id">
                    </select>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">学生性别</label>
                <div class="layui-input-inline">
                    <input type="radio" name="sex" value="男" class="layui-input" title="男" required>
                    <input type="radio" name="sex" value="女" class="layui-input" title="女" required>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">科目</label>
                <div class="layui-input-block">
                    <div id="check">
                        <!--                    <input type="checkbox" name="c_id[]" value="" title=""-->
                        <!--                           class="layui-input">-->
                    </div>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label" for="create_time_id">时间</label>
                <div class="layui-input-inline">
                    <input type="text" name="create_time" id="create_time_id" class="layui-input" placeholder="请输入时间"
                           required>
                </div>
            </div>

            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button type="button" onclick="add();" class="layui-btn">提交</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </div>

        </form>
    </div>
</div>


<script>

    $(document).ready(function () {
        layui.use(['form', 'laydate'], function () {
            var form = layui.form;
            var laydate = layui.laydate;
            classes(form);
            course(form);

            laydate.render({
                elem: '#create_time_id',
                type: 'datetime',
                theme: '#393D49',
                calendar: true
            });
        })
    })


    function classes(form) {
        $.ajax({
            dataType: "json",
            type: "POST",
            url: "/studentLayer/Student/Classes",
            success: function (ajax) {
                var html = "<option></option>";
                ajax.data.forEach(function (value, index) {
                    html = html
                        + "<option value='" + value.id + "'>" + value.name + "</option>"
                })
                $("#cls_id").html(html);
                // $("select[name=cls_id]").html(html);
                form.render("select");
            }

        })

    }


    function course(form) {
        $.ajax({
            dataType: "json",
            url: "/studentLayer/Student/course",
            method: "POST",
            success: function (ajax) {
                var html = "";
                ajax.data.forEach(function (value, index) {
                    html = html
                        + "<input type='checkbox' class='layui-input' " +
                        "name='c_id[" + value.id + "]' value='" + value.id + "' title='" + value.name + "'>";

                })

                $("#check").html(html);
                form.render('checkbox');
            }
        })
    }


    function add() {

        var c_name = new Array();
        $("#check>input:checked").each(function (index, element) {
            c_name.push(element.value);
        })
        console.log(c_name);
        $.ajax({
            dataType: "json",
            type: "POST",
            url: "/studentLayer/Student/InsertStudent",
            data: {
                "name": $("#name_id").val(),
                "password": $("#password_id").val(),
                "age": $("#age_id").val(),
                "cls_id": $("#cls_id>option:selected").val(),
                "sex": $("input[name=sex]:checked").val(),
                "c_id": c_name,
                "create_time": $("#create_time_id").val()
            },
            success: function (ajax) {
                if (ajax.code == 0) {
                    layer.msg(ajax.msg, {anim: 1}, function () {
                        var index = parent.layer.getFrameIndex(window.name);
                        parent.location.reload(index);
                        parent.layer.close(index);
                        window.location.href = "/studentLayer/Student/SelectStudent";
                    })
                } else {
                    layer.msg(ajax.msg, function () {
                        var index = parent.layer.getFrameIndex(window.name);
                        parent.location.reload(index);
                        parent.layer.close(index);
                        window.location.href = "/studentLayer/Student/SelectStudent";
                    })
                }
            }
        })
    }


</script>


</body>
</html>